<template>
  <div class="interVisibility">
    <div class="interVisibility-top">
      <span>
        通视分析
      </span>
      <el-popover
          class="interVisibility-help"
          placement="top-end"
          title="帮助说明"
          width="250"
          trigger="click"
          content="点击'选择区域'后，鼠标左键在模型中先选择视点，然后可以多次点击鼠标左键绘制与视点的通视分析，点击鼠标右键结束绘制，可自由观察">
        <el-button slot="reference"><i class="ri-question-line"></i></el-button>
      </el-popover>
    </div>
    <div class="interVisibility-divider">
      <el-divider>
        <i class="ri-pencil-line"></i>
      </el-divider>
    </div>
    <div class="interVisibility-data">
      <el-form ref="interVisibilityData" :model="interVisibilityObj" label-width="140px">
        <el-form-item label="视点高度">
          <el-input-number v-model="interVisibilityObj.height" :step="0.1" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="可见区域颜色" class="color">
          <el-color-picker color-format="rgb" v-model="interVisibilityObj.visibleColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="不可见区域颜色" class="color">
          <el-color-picker color-format="rgb" v-model="interVisibilityObj.invisibleColor"></el-color-picker>
        </el-form-item>
      </el-form>
    </div>
    <div class="interVisibility-btn">
      <el-button @click="selectInterVisibility()">选择区域</el-button>
      <el-button @click="delInterVisibility()">删除</el-button>
      <el-button @click="closeInterVisibility()">关闭</el-button>
      <el-button @click="saveInterVisibility()">保存</el-button>
    </div>
  </div>
</template>
<style lang="scss">
@import '@/css/AnalysisTools/interVisibility';
</style>
<script>
/* eslint-disable */

export default {
  name: "interVisibility",
  data() {
    return {
      interVisibilityObj: {
        //视点高度（距离场景交互所拾取点的高度），取值范围：[任意负数~任意正数]，默认值：0
        height: 1.7,
        //可见区域的颜色
        visibleColor: 'rgb(241,9,9)',
        //不可见区域的颜色
        invisibleColor: 'rgb(65,243,4)',
      },
    }
  },
  methods: {
    extractRGBComponents(colorString) {
      const rgbRegExp = /rgb\((\d+),\s*(\d+),\s*(\d+)\)/;
      const match = colorString.match(rgbRegExp);
      if (match) {
        return [parseInt(match[1]) / 255, parseInt(match[2]) / 255, parseInt(match[3]) / 255];
      } else {
        return null;
      }
    },
    selectInterVisibility() {
      let visibleColor = this.extractRGBComponents(this.interVisibilityObj.visibleColor)
      let invisibleColor = this.extractRGBComponents(this.interVisibilityObj.invisibleColor)
      let obj = {
        height: this.interVisibilityObj.height,
        visibleColor: visibleColor,
        invisibleColor: invisibleColor,
      }
      __g.tools.startVisiblityAnalysis(obj);
    },
    delInterVisibility() {
      __g.tools.stopVisiblityAnalysis();
    },
    closeInterVisibility() {
      this.$emit('close-popup');
      this.reloadInterVisibility()
    },
    reloadInterVisibility() {
      this.interVisibilityObj = {
        height: 1.7,
        visibleColor: 'rgb(241,9,9)',
        invisibleColor: 'rgb(65,243,4)',
      }
    },
    saveInterVisibility() {
      this.$message.success("开发中")
    },
  },
  mounted() {

  },
  created() {

  },
  destroyed() {
    this.reloadInterVisibility()
  },
};
</script>